<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-07-12 16:55:16
 * @LastEditTime: 2024-07-12 18:00:53
 * @FilePath: \面试题-刘琳\前端面试题2\index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>刘琳-面试题2</title>

  <link rel="stylesheet" href="index.css" id="stylesheet">
</head>
<body>
  <div class="canvasBox">
    <canvas id="charts"></canvas>
  </div>
  
  <script>
    var cvs = document.getElementById('charts');
    var ctx = cvs.getContext('2d');
    var dataList = [89815.85,65541.37,68983.43, 80520.7,71360.8,71308.09,97843.1,74963.94,72430.98,81891.22,126140.02,57712.01,85631.65,68464.57,73150.3,91573.05,81404.2,76903.97,71145.33,81884.81,90759.47,80811.97,76918.84];   //y轴坐标
    var preYAxisLst= ['0','50000','100000','150000'];
    // 如果直接用preYAxisLst的话y轴的刻度值显示就变成了低的在上边，高的在下边的情况所以做一次reverse
    var yAxisLst = preYAxisLst.reverse();
    //x轴坐标
    var xAxisList = getMonthArr('2016-12', 12).concat(getMonthArr('2017-12', 12))
    var intervalLine = 150; // 间隔
    var lineWid = 1400;	//x轴最大宽度
    // 生成x轴刻度值的间隔值
    var intervalRow = (0.95 * lineWid) / (xAxisList.length - 1);
    // x轴位置
    var xAxis = (preYAxisLst.length - 1) * intervalLine + 20;
    
    /* 我们从后台获取的肯定是一个数据的数组
    但是它还不是坐标不能直接使用
    通过下方的valToCoor方法进行一个转化
    原理比较简单，就是一个差值的比例关系 */
    //值与刻度转化
    var valToCoor = function(val){
      var deg = (preYAxisLst[preYAxisLst.length - 1] * 1000 - preYAxisLst[0] * 1000) / 1000000;
      var dec = (preYAxisLst[preYAxisLst.length - 1] * 1000 - val * 1000) / 1000000;
      var orgVal = intervalLine * (preYAxisLst.length - 1);
      var pec = orgVal / deg;
      var finalVal = orgVal - dec * pec + 20;
      return finalVal;
    }
    
    // 通过数据长度进行canvas元素的高度调整
    cvs.width = preYAxisLst.length * lineWid - 4000
    cvs.height = preYAxisLst.length * intervalLine + 20
    // 横轴及纵坐标
    ctx.beginPath();
    ctx.font = '10px Arial';
    ctx.textAlign = 'right';
    ctx.fillStyle = 'rgb(110,110,110)';
    for(var i = 0; i < yAxisLst.length; i++){
      ctx.moveTo(intervalRow, 20 + i * intervalLine),
      ctx.lineTo(lineWid+intervalRow,  20 + i * intervalLine)
      console.log(yAxisLst[i])
      if(yAxisLst[i]==0) yAxisLst[i] = 0

      ctx.fillText(yAxisLst[i], intervalRow, 24 + i * intervalLine)
    }
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgb(221,221,221)';
    ctx.stroke();
    
    // 横坐标
    ctx.beginPath();
    ctx.font = '11px Arial'
    ctx.textAlign = 'center';
    ctx.fillStyle = 'rgb(110,110,110)';
    for(var j = 0; j < xAxisList.length; j++){
      ctx.moveTo(intervalRow * j+intervalRow, xAxis),
      ctx.lineTo(intervalRow * j+intervalRow, xAxis + 10);
      ctx.fillText(xAxisList[j], intervalRow + intervalRow * j, xAxis + 22)
    } 
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'rgb(201,213,226)';
    ctx.stroke();
    
    // 绘制折线
    ctx.beginPath();
    ctx.moveTo(intervalRow, valToCoor(dataList[0]));
    for(var l = 0; l < dataList.length; l++){
      ctx.lineTo(intervalRow * (l+1), valToCoor(dataList[l]));
      ctx.fillText(dataList[l], intervalRow * (l+1), valToCoor(dataList[l])-10)
    }
    ctx.strokeStyle = 'rgb(143, 203, 234)';
    ctx.stroke();
    
    // 获取一年月份
    function getMonthArr(date, n) {
				let dateArr = [];
				let year = date.split('-')[0];
				let month = date.split('-')[1];
				
				let m = Number(month);
				
				if(n < m) {
					//1.n<month的情况
					for(let i=m-n+1;i<=month;i++){
						let m1 = i < 10 ? "0" + i : i;
						dateArr.push(year + '-' + m1);
					}
				} else {
					//2.n>month的情况					
					for(let i=(12-(n-m)+1);i<=12;i++){
						let m1 = i < 10 ? "0" + i : i;
						dateArr.push((year-1) + '-' + m1);
					}
					for(let i=1;i<=m;i++){
						let m1 = i < 10 ? "0" + i : i;
						dateArr.push(year + '-' + m1);
					}
				}
				return dateArr;
				
			}
  </script>
</body>
</html>